<!--  -->
<template>
<div>
  <div v-if="node.type!='device_700'">
<el-table :data="allData" :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
  stripe size="small">
  <el-table-column prop="name" label="工作站名称"></el-table-column>
  <el-table-column prop="type" label="类型">
    <template slot-scope="scope">
      <span v-if="scope.row.type=='device_700'">传感器</span>
      <span v-if="scope.row.type=='device_600'">采集器</span>
    </template>
  </el-table-column>
  <el-table-column prop="location" label="位置"></el-table-column>
  <el-table-column prop="code" label="编号"></el-table-column>
  <el-table-column prop="factory" label="厂家"></el-table-column>
  <el-table-column prop="remark" label="备注"></el-table-column>
  <el-table-column label="操作" width="120">
    <template slot-scope="scope">
      <el-tooltip content="修改">
        <el-button type="text" icon="el-icon-edit-outline" @click="handleEdit(scope.row)"></el-button>
      </el-tooltip>
      <el-tooltip content="删除">
        <el-button type="text" icon="el-icon-delete" style="color:red !important"
          @click="handleDelete(scope.row)">
        </el-button>
      </el-tooltip>
    </template>
  </el-table-column>
</el-table>
<div class="page">
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    :page-count="pageNum"
    @current-change="changeCurrent"
  ></el-pagination>
</div>
</div>
<div v-if="node.type=='device_700'" >
  <sensor-detail :node='node' :TypeList='Typelist'></sensor-detail>
</div>
<!-- 新增、修改采集器弹窗 -->
<vx-popup :title="collectTitle" width="680px" @close="closeCollectPopup" :active.sync="collectVisible"
  @confirmPopup="submitFn('采集器')" @cancelPopup="closeCollectPopup">
  <el-form :model="collectForm" :rules="collectRules" ref="collectForm" label-width="110px"
    class="demo-sensorForm">
    <el-form-item label="设备名称：" prop="name">
      <el-input v-model="collectForm.name" placeholder="请输入设备名称"></el-input>
    </el-form-item>
    <el-form-item label="运行状态：" prop="status">
      <el-radio-group v-model="collectForm.status">
        <el-radio :label="1">开启</el-radio>
        <el-radio :label="0">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="设备类型：" prop="deviceType">
      <el-select v-model="collectForm.deviceType" placeholder="请选择...">
        <el-option v-for="(item,index) in Typelist" :key="index" :label="item.sensorName" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item label="上传图片:" >
      <div class="el-upload-list el-upload-list--picture-card mb-2 ml-1 mt-3" v-show="!hideShow">
        <div class="el-upload-list__item is-success">
          <img class="flex-img__image" :src="download + collectForm.picUrl" style="width:100%;height:100%" />
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-check"></i>
          </label>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete">
              <i class="el-icon-delete" @click.stop="handleRemove('collectForm')"></i>
            </span>
          </span>
        </div>
      </div>
      <el-upload
      v-if="hideShow"
     :action="upload"
     list-type="picture-card"
     :on-remove="removeRender('collectForm')"
     :on-success="handleSuccessRender"
     :file-list="imgList"
     :limit="1">
     <i class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>
 </el-form-item>
    <el-form-item label="设备编号：" prop="code">
      <el-input v-model="collectForm.code" placeholder="请输入设备编号"></el-input>
    </el-form-item>
    <el-form-item label="备注：">
      <el-input v-model="collectForm.remark" placeholder="请输入备注 500字以内" type="textarea" :rows="3"
        maxlength="500">
      </el-input>
    </el-form-item>
  </el-form>
</vx-popup>

<!-- 新增、修改传感器弹窗 -->
<vx-popup :title="sensorTitle" width="680px" @close="closeSensor" :active.sync="sensorVisible"
  @confirmPopup="submitFn('传感器')" @cancelPopup="closeSensor">
  <el-form :model="sensorForm" :rules="sensorRules" ref="sensorForm" label-width="120px"
    class="demo-sensorForm">
    <el-form-item label="设备名称：" prop="name">
      <el-input v-model="sensorForm.name" placeholder="请输入设备名称"></el-input>
    </el-form-item>
    <el-form-item label="运行状态：" prop="status">
      <el-radio-group v-model="sensorForm.status">
        <el-radio :label="1">开启</el-radio>
        <el-radio :label="0">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="设备类型：">
      <el-select v-model="sensorForm.deviceType" placeholder="请选择...">
        <el-option v-for="(item,index) in Typelist" :key="index" :label="item.sensorName" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item label="上传图片:" >
      <div class="el-upload-list el-upload-list--picture-card mb-2 ml-1 mt-3" v-show="!hideShow">
        <div class="el-upload-list__item is-success">
          <img class="flex-img__image" :src="download + sensorForm.picUrl" style="width:100%;height:100%" />
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-check"></i>
          </label>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete">
              <i class="el-icon-delete" @click.stop="handleRemove('sensorForm')"></i>
            </span>
          </span>
        </div>
      </div>
      <el-upload
      v-if="hideShow"
     :action="upload"
     list-type="picture-card"
     :on-remove="removeRender('sensorForm')"
     :on-success="handleSuccessRender"
     :file-list="imgList"
     :limit="1">
     <i class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>
 </el-form-item>
    <el-form-item label="设备编号："  prop="code">
      <el-input v-model="sensorForm.code" placeholder="请输入设备编号"></el-input>
    </el-form-item>
    <el-form-item label="传感器位置：">
      <el-input v-model="sensorForm.location" placeholder="请输入传感器位置"></el-input>
    </el-form-item>
    <el-form-item label="采集频率：">
      <el-input v-model="sensorForm.deviceRate" placeholder="请输入采集频率"></el-input>
    </el-form-item>
    <el-form-item label="通讯方式：">
      <el-input v-model="sensorForm.communicateType" placeholder="请输入通讯方式"></el-input>
    </el-form-item>
    <el-form-item label="采集器地址：">
      <el-input v-model="sensorForm.address" placeholder="请输入采集器地址"></el-input>
    </el-form-item>
    <!-- <el-form-item label="测点id：">
      <el-input v-model="sensorForm.measurePointId" placeholder="请输入..."></el-input>
    </el-form-item> -->
    <el-form-item label="监测设备类别：">
      <el-input v-model="sensorForm.monitorDeviceType" placeholder="请输入检测设备类别"></el-input>
    </el-form-item>
    <el-form-item label="备注：">
      <el-input v-model="sensorForm.remark" placeholder="请输入备注 500字以内" type="textarea" :rows="3"
        maxlength="500"></el-input>
    </el-form-item>
  </el-form>
</vx-popup>

</div>
</template>

<script>
  import sensorDetail from './sensorDetail.vue'
  import base from "@/api/base";
export default {
  components:{
    sensorDetail
  },
props: {
  allData: {
    type: Array,
    default: null
  },
  node: {
    type: Object,
    default: null
  },
  getTree: {
    type: Function,
    default: null
  },
  getStation: {
    type: Function,
    default: null
  },
  Typelist: {
    type: Array,
    default: null
  },
},
watch: {
  allData: {
    handler(newName, oldName) {
      // console.log(newName)
      this.total = newName.length
    },
    deep: true
  }

},
data() {
  return {
    total:0,
    pageSize:10,
    pageNum:1,
    hideShow:true,
    upload: base.UPLOADURL,
    download:base.DOWNLOADURL,
    imgList: [],
    tableData: [],
    collectTitle: '',
    sensorTitle: '',
    collectVisible: false,
    sensorVisible: false,
    collectForm: {
      name: "",
      status: "",
      deviceType: "",
      code: "",
      location: '',
      deviceRate: '',
      communicateType: '',
      address: '',
      measurePointId: '',
      monitorDeviceType: '',
      remark: "",
      picUrl: '',
      id: '',
      ownId: '',
      pId: '',
    },
    collectRules: {
      name: [{
          required: true,
          message: "请输入名称",
          trigger: "blur"
        },
        {
          min: 3,
          max: 10,
          message: '长度在 3 到 10个字符',
          trigger: 'blur'
        }
      ],
      code: [{
          required: true,
          message: "请输入编码",
          trigger: "blur"
        },
        {
          min: 3,
          max: 5,
          message: '长度在 3 到 5 个字符',
          trigger: 'blur'
        }
      ],
    },
    sensorForm: {
      name: "",
      status: "",
      deviceType: "",
      code: "",
      location: "",
      deviceRate: "",
      communicateType: "",
      address: "",
      measurePointId: "",
      monitorDeviceType: "",
      remark: "",
      ownId: "",
      pId: "",
      picUrl: "",
      id: "",
    },
    sensorRules: {
      name: [{
        required: true,
        message: "请输入名称",
        trigger: "blur"
      },{
          min: 3,
          max: 10,
          message: '长度在 3 到 10个字符',
          trigger: 'blur'
        }],
      code: [{
        required: true,
        message: "请输入编号",
        trigger: "blur"
      },{
          min: 3,
          max: 10,
          message: '长度在 3 到 10个字符',
          trigger: 'blur'
        }],
      status: [{ required: true, message: '请选择运行状态', trigger: 'change' }],
    },
  }
},
created() {
  // this.getStation()
},
methods: {
  changeCurrent(val) {
    this.pageNum = val
    this.refreshList()
  },
  handleRemove(form) {
      this[form].picUrl = '';
      this.hideShow = true
    },
  handleSuccessRender(res, file) {
    // console.log(res,'1')
    // console.log(file,'2')
    if(this.sensorForm.name)
    this.sensorForm.picUrl=res.data.successFiles[0].filePath
    if(this.collectForm.name)
    this.collectForm.picUrl=res.data.successFiles[0].filePath
    this.hideShow = false
  },
  removeRender(form) {
    this[form].picUrl = ''
  },
  //传感器--------------------
  //开启传感器弹窗
  openSensor() {
    this.cleanForm()
    //addDeviceSensor
    this.sensorTitle="新增传感器"
    this.sensorForm.ownId = this.node.ownId
    this.sensorForm.pId = this.node.id
    this.sensorVisible = true
  },
  //关闭弹窗
  closeSensor() {
    this.sensorVisible = false
  },
  //提交新增
  submitFn(title) {
    this.sensorForm.createTime=''
    this.sensorForm.updateTime=''
    this.collectForm.createTime=''
    this.collectForm.updateTime=''
    if(title=='传感器') {
      if(this.sensorTitle=='新增传感器')
      this.sendAddApi(this.sensorForm,'addDeviceSensor','refreshList','sensorVisible','新增')
      if(this.sensorTitle=='修改传感器')
      this.sendAddApi(this.sensorForm,'upDeviceSensor','refreshList','sensorVisible','修改')
    }
    if(title=='采集器') {
      if(this.collectTitle=='新增采集器')
      this.sendAddApi(this.collectForm,'addCollector','refreshList','collectVisible','新增')
      if(this.collectTitle=='修改采集器')
      this.sendAddApi(this.collectForm,'editCollector','refreshList','collectVisible','修改')

    }
  },

  //采集器-------------------
  //打开采集器弹窗
  addCollector() {
    this.cleanForm()
    this.collectTitle = '新增采集器'
    this.collectForm.ownId = this.node.ownId
    this.collectForm.pId = this.node.id
    this.collectVisible = true
  },
  //关闭采集器
  closeCollectPopup() {
    this.collectVisible = false
  },
  //修改采集器，传感器
  handleEdit(row) {
    if(row.type=="device_600") //采集器
    {
      this.collectTitle = '修改采集器'
      this.collectForm = row
      this.collectVisible = true

    }
    if(row.type=="device_700")//传感器
    {
      this.sensorTitle = '修改传感器'
      this.sensorForm = row
      if(this.sensorForm.picUrl!='')
      this.hideShow = false
      this.sensorVisible = true
    }
  },
  //刪除采集器，传感器
  handleDelete(row) {
    if(row.type=="device_600")
    this.sendDelApi('delCollector',row.id,'refreshList')
    if(row.type=="device_700")
    this.sendDelApi('delSensor',row.id,'refreshList')
  },
  //万能新增，修改函数
  sendAddApi(params,apiName,listFn,visName,addOrDel){
    if(!params.name){
        this.$message({
          type: "danger",
          message: "请输入名称",
          });
        return false
    }
    this.$api.bridge[apiName](params).then(res=>{
        console.log(res.data)
        if(res.data.success){
          this.$message({
          type: "success",
          message: `&{addOrDel}成功`,
          });
        this[listFn]()
        this[visName] = false
        this.cleanForm()
        }
      })
  },
  //万能删除函数
  sendDelApi(apiFn,id,listFn){
    this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        this.$api.bridge[apiFn]({id}).then(res=>{
          if(res.data.success){
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this[listFn]()
          }
        })
        callback()
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
  },
  //刷新列表
  refreshList(){
    this.getTree()
    this.getStation()
  },
  cleanForm(){
    console.log(1)
    this.$refs.collectForm.resetFields();
    this.$refs.sensorForm.resetFields();
    this.hideShow=true,
    this.imgList = []
    this.collectForm={
      name: "",
      status: "",
      deviceType: "",
      code: "",
      location: '',
      deviceRate: '',
      communicateType: '',
      address: '',
      measurePointId: '',
      monitorDeviceType: '',
      remark: "",
      picUrl: '',
      id: '',
      ownId: '',
      pId: '',
    }
    this.sensorForm= {
      name: "",
      status: "",
      deviceType: "",
      code: "",
      location: "",
      deviceRate: "",
      communicateType: "",
      address: "",
      measurePointId: "",
      monitorDeviceType: "",
      remark: "",
      ownId: "",
      pId: "",
      picUrl: "",
      id: "",
    }
  },
},
mounted() {

}
}

</script>
<style lang='scss' scoped>
    .page {
    margin-top: 20px;
    text-align: center;
  }
</style>
